<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_元素溢出</title>
    <style>
        .txt{
            background-color: yellow;
            width: 300px;
            /*下面三句代码是组合代码 缺一不可*/
            white-space: nowrap;/*强制文本不换行*/
            overflow: hidden;/*溢出部分直接隐藏（裁掉）*/
            text-overflow: ellipsis;/*如果有溢出的文字替换为省略号*/
        }
        .over{
            background-color: lime;
            width: 600px;
            height: 400px;
            overflow: visible;/*溢出可见*/
            overflow: hidden;/*溢出隐藏 多余的部分直接裁掉*/
            overflow: scroll;/*溢出显示拖拽条，无论是否溢出 两个方向都显示*/
            overflow: auto;/*自动显示拖拽条 只有溢出的方向显示*/
        }
    </style>
</head>
<body>
<div class="txt" title="威哥，我他吗来啦！！！">
    lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam animi asperiores at atque beatae blanditiis consequatur consequuntur corporis cum cumque delectus deleniti dicta dignissimos distinctio dolorem doloremque dolores doloribus ea earum eius eligendi enim esse eveniet expedita facilis fuga fugiat harum hic id illum impedit incidunt inventore ipsam ipsum iure iusto labore laborum laudantium libero magnam maiores maxime minima minus molest
</div>
<div class="over"><img src="img/1.png"></div>
</body>
</html>